<template>
  <ul class="nav-tags">
    <li
      class="tag-item"
      v-for="(item, index) in navtags"
      :key="index"
      :class="isActive() == index ? 'active' : ''"
      @click="goToPage(item.path)"
    >
      {{ item.meta.title }}
      <template v-if="isActive() == index">
        <b-icon
          name="RefreshRight"
          color="#fff"
          :size="16"
          class="close"
          @click.stop="refreshPage"
        ></b-icon>
      </template>
      <template v-if="isActive() == index && index > 0">
        <b-icon
          name="Close"
          color="#fff"
          :size="16"
          class="close"
          @click.stop="closePage(item)"
        ></b-icon>
      </template>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useNavtagsStore } from "@/stores";
import { useRouter, useRoute } from "vue-router";
import BIcon from "./BIcon.vue";
const router = useRouter();
const route = useRoute();

let emit = defineEmits(["tagDeleteChange", "tagRefreshPage"]);

const navtagsStore = useNavtagsStore();
let navtags = ref(navtagsStore.navtags);

watch(
  () => navtagsStore.navtags,
  (newValue, oldValue) => {
    navtags.value = newValue;
  },
  {
    deep: true,
  }
);

/**
 * 判断导航项是否处于激活状态。
 *
 * 该函数通过比较当前路由路径与导航项的路径，来确定导航项是否激活。
 * 如果路由路径与某个导航项的路径匹配，则返回该导航项在数组中的索引。
 * 如果没有匹配的路径，则返回0，表示没有导航项处于激活状态。
 *
 * @param {Object} item 导航项对象，包含导航项的路径等信息。
 * @returns {number} 如果导航项激活，返回其在数组中的索引；否则返回0。
 */
const isActive = (item) => {
  for (var i = 0; i < navtags.value.length; i++) {
    if (navtags.value[i].path == route.path) {
      return i;
    }
  }
  return 0;
};

const closePage = (item) => {
  navtagsStore.removeTag(item);
  if (navtagsStore.navtags.length == 1) {
    goToPage("/");
  } else {
    goToPage(navtagsStore.navtags[1].path);
  }
};

/**
 * 导航到指定的页面路径。
 *
 * 该函数用于程序中的页面导航，通过传入一个路径，它将利用Vue Router的能力将当前的浏览上下文导航到新的路径。
 * 这是非常有用的功能，特别是在单页面应用程序中，需要根据用户的操作或逻辑条件来动态切换页面内容时。
 *
 * @param {string} path - 需要导航到的页面路径。这个路径应该是Vue Router配置中定义的有效路径。
 */
const goToPage = (path) => {
  router.push(path);
};

const refreshPage = () => {
  emit("tagRefreshPage");
};
</script>

<style scoped lang="scss">
.nav-tags {
  padding: 15px 15px 0;
  display: flex;

  .tag-item {
    height: 26px;
    line-height: 26px;
    padding: 0 15px;
    font-size: 12px;
    background-color: $b-bg-white;
    border-radius: 5px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      cursor: pointer;
      color: $color-primary;
    }

    .close {
      position: relative;
      right: -5px;
      cursor: pointer;
      padding: 1.5px;

      &:hover {
        background-color: #86b7e9;
        border-radius: 50%;
      }
    }

    &.active {
      background: $color-primary;
      color: $color-white;
    }
  }
}
</style>
